<template>
	<view>
		<view id="container">

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: 0, // 使用 marker点击事件 需要填写id
				title: 'map',
				latitude: 39.909,
				longitude: 116.39742,
				covers: [{
					latitude: 39.909,
					longitude: 116.39742,
					iconPath: 'https://gxtravel.ncscloudmedia.com/uploads/png/20250701/c67170546ecc2a72ad2a7f5d5579b093.png'
				}, {
					latitude: 39.90,
					longitude: 116.39,
					iconPath: 'https://gxtravel.ncscloudmedia.com/uploads/png/20250701/c67170546ecc2a72ad2a7f5d5579b093.png'
				}]
			};
		},
		mounted() {
			this.initQQMap();
		},
		methods: {
			initQQMap() {
				const that = this;
				that.map = new TMap.Map('container', {
					center: new TMap.LatLng(39.984104, 116.307503),
					zoom: 12,
					zIndex: 2
				});
				this.createMarker()
			},
			createMarker() {
				var markerArr = [{
						"id": "marker1",
						"styleId": 'marker',
						"position": new TMap.LatLng(39.954104, 116.457503),
						"properties": {
							"title": "marker1"
						}
					}, {
						"id": "marker2",
						"styleId": 'marker',
						"position": new TMap.LatLng(39.794104, 116.287503),
						"properties": {
							"title": "marker2"
						}
					}, {
						"id": "marker3",
						"styleId": 'marker',
						"position": new TMap.LatLng(39.984104, 116.307503),
						"properties": {
							"title": "marker3"
						}
					}

				];
				let that = this
				let mark1 = new TMap.MultiMarker({
					id: 'marker-layer',
					map: that.map,
					styles: {
						"marker": new TMap.MarkerStyle({
							"width": 30,
							"height": 35,
							"anchor": {
								x: 16,
								y: 32
							},
							"src": 'https://gxtravel.ncscloudmedia.com/uploads/png/20250701/c67170546ecc2a72ad2a7f5d5579b093.png'
						})
					},
					geometries: markerArr
				});
			},
		}
	}
</script>

<style lang="scss">

</style>